﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS选择器</title>
    <!--非元素内联的样式有三种选择器：标签选择器、class选择器、id选择器-->
    <style type="text/css">
        label{background-color:Blue}
        .sheetstyle{background-color:Yellow}
        #userName{background-color:Red}
        .sheetstyle2{color:Red}
        input.class1{background-color:Green}
        p strong{background-color:Yellow}
        h1,h2{background-color:Blue}
    </style>
</head>
<body>
    <!--标签选择器-->
    <label>标签选择器</label>

    <!--class选择器-->
    <input type="text" value="class选择器" class="sheetstyle" />

    <!--id选择器-->
    <input type="text" value="id选择器" id="userName"/>

    <input type="text" value="class选择器" class="sheetstyle sheetstyle2" />

    <!--标签+class选择器-->
    <br />
    <input class="class1" type="text" value="标签+class选择器" />

    <!--关联选择器-->
    <br />
    <strong>不在P内的strong</strong>
    <p><strong>P内的strong标签的样式</strong></p>

    <!--组合选择器-->
    <h1>组合选择器</h1>
    <h2>组合选择器</h2>
</body>
</html>
